<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <title>角色列表</title>
    <meta charset="UTF-8">
    <script src="../../../js/jquery-2.0.3.min.js"></script>
    <link rel="stylesheet" href="../../../css/bootstrap.min.css">
    <script src="../../../js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../../../css/bootstrapValidator.css">
    <script src="../../../js/bootstrapValidator.js"></script>
    <script src="../../../js/jquery.cookie.js"></script>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="../../../js/hostConfig.js"></script>


</head>
<body>
<div class="container">
    <div class="col-lg-1 "><a href="/#" class="btn btn-default">返回首页</a></div>
    <a :href="'123'+'245'">修改</a>
    <div class="col-lg-1"><a href="/pages/manage/role/add.html" class="btn btn-default">增加角色</a></div>
    <table class="table table-hover">
        <caption>文件列表</caption>
        <thead>
        <tr>
            <th>ID</th>
            <th>名称</th>
            <th>描述</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody id="app">
        <tr v-for="role in todos">
            <td v-text="role.id">1</td>
            <td v-text="role.name">2</td>
            <td v-text="role.description">3</td>
            <td>
                <a href="javascript:;" v-on:click="submitUserInfo(role.id)">删除</a>
                <a :href="'/pages/manage/role/detail.html?id='+role.id">查看详细</a>
                <a :href="'/pages/manage/role/update.html?id='+role.id">修改</a>
            </td>
        </tr>
        </tbody>
    </table>
</div>
</body>
</html>
<script>

    var app = new Vue({
        el: '#app',
        data: {
            todos: []
        },
        mounted() {
            axios({method: 'post', url: host_tomcatR + '/role/list', withCredentials: true}).then(res => this.todos = res.data);
        },
        methods: {
            submitUserInfo: function (id) {
                axios.post('/auth/role/delete?id=' + id).then(response => {
                    this.ret = response.data;
                    if (this.ret.code != "0000") {
                        console.log(this.ret.code);
                    } else {
                        window.location.href = "/pages/manage/role/list.html";
                    }
                });
            }
        }
    });
</script>